<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
       *{ 
       margin:0;
       padding:0;
       font-family: 'Courier New', Courier, monospace;
    }

    .a{
        width:100vw;
        height: 300px;
        background-color: skyblue;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
    }

    .con{
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
    } 

</style>
<link rel="stylesheet" href="./pull-refresh.plugin.css">
<body>
    <div class="b">
        准备加载...
    </div>

    <div class="a">
        <div class="con">
             <h2>下拉加载</h2>
        </div>
    </div>
    <script src="https://unpkg.com/axios@0.26.0/dist/axios.min.js"></script>
    <script src="../example/Utils.js"></script>
    <script src="./pull-refresh.plugin.js"></script>
    <script>
         
         //    
         $.pullDownRefresh({
             containercName:".a",
             freshContainercName:".b",
             beforeLoadText:"准备加载~~",
             loadingText:"加载中...",
             loadedSuccessText:"加载成功!",
             url:"http://localhost/api/pull_load",
             pullOffset:200,
             success:function(res){
                   console.log(res); 
             },
             error:function(err){   
                   console.log(err);
             }
         });

    </script>
</body>
</html>